<template>
  <div class="ele-body">
    <div style="display: flex; justify-content: space-between">
      <three-school :activeList="activeList" load-school @click="schoolChange" @visible="threeSchoolVisible=$event"></three-school>
      <el-card shadow="never" style="width: 100%">
        <div :style="threeSchoolVisible ? '' : 'padding-left: 16px'">
          <b style="margin-bottom:4px; display: inline-block;">所属学校：{{ schoole_name || '暂无学校' }}</b>
          <el-form inline size="mini" :model="query" class="ele-form-search" @keyup.enter.native="reload"
                   @submit.native.prevent>
            <el-form-item label="年级:">
              <el-select style="width:100%" clearable :disabled="!query.schoole_id" v-model="query.grade_id"
                         placeholder="请输入年级">
                <el-option :value="item.id" :label="item.title" v-for="(item,index) in gradeList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="班级:">

              <el-select style="width:100%" clearable :disabled="!query.grade_id" v-model="query.class_id"
                         placeholder="请输入班级">
                <el-option :value="item.id" :label="item.title" v-for="(item,index) in classList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="性别:">
              <el-select clearable v-model="query.gender" placeholder="请选择性别" class="ele-fluid">
                <el-option label="男" :value="1"/>
                <el-option label="女" :value="2"/>
                <el-option label="未知" :value="0"/>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input clearable v-model="query.keywords" placeholder="输入姓名或学号等关键字"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="reload">查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="toolbar-box" style="margin-bottom:4px;">
          <div class="tool-btn">
            <el-button @click="importExcel" icon="el-icon-upload2" class="ele-btn-icon" size="mini">导入
            </el-button>
            <el-button size="mini" type="default" icon="el-icon-download" class="ele-btn-icon"
                       @click="exportExcel">导出
            </el-button>
          </div>
          <div class="tool-tab">
            <el-button size="mini" type="danger" icon="el-icon-delete" class="ele-btn-icon" :disabled="!selection.length" @click="removeBatch">删除
            </el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit(null)">添加
            </el-button>
          </div>
        </div>
        <!-- 数据表格 -->
        <el-table border lazy ref="table" :data="data" v-loading="loading" height="calc(100vh - 315px)"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="序号" width="55" align="center" type="index">
            <template slot-scope="scope">
                <span v-text="$setTableIndex(query.page, query.limit, scope.$index)">
                </span>
            </template>
          </el-table-column>
          <el-table-column label="头像" align="center" prop="avatar">
            <template slot-scope="scope">
              <img :src="getimageUrl(scope.row.avatar)" style="width:50px;height:50px;">
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="name"/>
          <el-table-column label="学号" align="center" prop="student_no"/>
          <el-table-column label="身份证号" align="center" prop="id_card"/>
          <el-table-column label="性别" align="center" prop="gender">
            <template
                slot-scope="scope">
              {{ scope.row.gender === 0 ? '未知' : scope.row.gender === 1 ? '男' : scope.row.gender === 2 ? '女' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="年级" align="center" prop="grade_name"/>
          <el-table-column label="班级" align="center" prop="class_name"/>
          <el-table-column label="学校" align="center" prop="schoole_name"/>
          <el-table-column label="电话" align="center" prop="phone"/>
          <el-table-column label="紧急联系人" align="center" prop="relatives_phone"/>
          <el-table-column label="设备IMEI" align="center" prop="imei"/>
          <el-table-column label="SIM卡号" align="center" prop="sim_no"/>
          <el-table-column label="创建时间" align="center" prop="create_time">
            <template slot-scope="scope">{{ $util.toDateString(scope.row.create_time) }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="150" :resizable="true">
            <template slot-scope="{row}">
              <el-link type="text" :underline="false" icon="el-icon-edit" @click.stop="openEdit(row)">修改
              </el-link>
              <el-popconfirm class="ele-action" title="确定要删除此用户吗？" @confirm="remove(row)">
                <el-link type="text" slot="reference" :underline="false" icon="el-icon-delete">删除
                </el-link>
              </el-popconfirm>
              <el-link type="text" :underline="false" icon="el-icon-location-outline"
                       @click.stop="openTrajectory(row)">轨迹
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getData"/>
      </el-card>
    </div>
    <!-- 编辑弹窗 -->
    <student-edit :data="current" :visible.sync="showEdit" v-if="showEdit" @done="reload" />
    <!-- 导入弹窗 -->
    <student-import v-if="showImport" :visible.sync="showImport" :schoole_id="schoole_id" @done="reload" />
    <!-- 运动轨迹 -->
    <trajectory :rowData="currentData" @closeDrawer="showtrajectory=$event" :visibleDrawer.sync="showtrajectory" />
  </div>
</template>

<script>
  import {
    mapGetters
  } from "vuex";

  import StudentEdit from './student-edit';
  import StudentImport from './student-import'
  import trajectory from './components/trajectory'
  import threeSchool from "@/components/three_schoole.vue";
  export default {
    name: 'SystemSchool',
    components: {
      threeSchool,
      StudentEdit,
      StudentImport,
      trajectory
    },
    computed: {
      ...mapGetters(["permission"]),
    },
    data() {
      return {
        threeSchoolVisible: true,
        imageUrl: 'https://api.gdjx-ai.com',
        loading: false, // 表格加载状态
        selection: [], // 表格选中数据
        total: 0, // 数据总数
        data: [], // 表格数据接口
        // 表格搜索条件
        query: {
          page: 1,
          limit: 10,
          province_code: '',
          city_code: '',
          district_code: '',
          streets_code: '',
          schoole_id: '',
          grade_id: '',
          class_id: '',
          gender: ''
        },
        // streetsList: [],
        schoolList: [],
        gradeList: [],
        classList: [],
        // 当前编辑数据
        current: null,
        currentData: null, //运动轨迹的数据
        // 是否显示编辑弹窗
        showEdit: false,
        // 是否显示导入弹窗
        showImport: false,
        showtrajectory: false,
        row_span: 20,
        activeList: [],
        schoole_name: '',
        schoole_id: ''
      };
    },
    mounted() {
      this.getDataInt();
    },
    watch: {
      // 'query.streets_code': {
      //   handler: function () {
      //       this.getSchoolList()
      //   },
      //   deep:true
      // },
      'query.schoole_id': {
        handler: function() {
          this.getGradeList()
        },
        deep: true
      },
      'query.grade_id': {
        handler: function() {
          this.getClassList()
        },
        deep: true
      },
    },
    methods: {
      getimageUrl(img) {
        if (img) {
          if (img.includes(this.imageUrl)) {
            return img
          } else {
            return this.imageUrl + img
          }

        } else {
          return ''
        }
      },
      getDataInt() {
        this.$http.get("/schoole/index", {
            params: {
              page: 1,
              limit: 1,
            }
          }).then(res => {
            if (res.data.count == 0) return;
            this.schoole_name = res.data.data[0].title
            this.schoole_id = res.data.data[0].id
            this.query = {
              page: 1,
              limit: 20,
              title: "",
              schoole_id: res.data.data[0].id,
              schoole_name: res.data.data[0].title,
            };
            this.activeList = [
              res.data.data[0].province_code,
              res.data.data[0].city_code,
              res.data.data[0].district_code,
              res.data.data[0].streets_code
            ];
            this.getData();
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      },
      schoolChange(data) {
        this.query = {
          page: 1,
          limit: 10,
          title: "",
          schoole_id: data.value,
          schoole_name: data.label,
        };
        this.schoole_name = data.label
        this.schoole_id = data.value
        this.getData();
      },
      // getSchoolList() {
      //   this.$http
      //     .get("/user/getSchoolList", { params: { streets_code: this.query.streets_code } })
      //     .then(res => {
      //       this.schoolList = res.data.data;
      //     })
      //     .catch(e => {
      //       this.$message.error(e.message);
      //     });
      // },
      getGradeList() {
        this.$http
          .get("/student/getGrade", {
            params: {
              schoole_id: this.query.schoole_id
            }
          })
          .then(res => {
            this.gradeList = res.data.data;
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      },
      getClassList() {
        this.$http
          .get("/student/getClass", {
            params: {
              grade_id: this.query.grade_id,
              schoole_id: this.query.schoole_id
            }
          })
          .then(res => {
            this.classList = res.data.data;
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      },
      /* 获取表格数据 */
      getData() {
        this.loading = true;
        this.$http
          .get("/student/index", {
            params: this.query
          })
          .then(res => {
            this.loading = false;
            this.total = res.data.count;
            this.data = res.data.data;
            console.log("data----", this.data)
          })
          .catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 查询数据 */
      reload() {
        this.getData();
      },
      /* 重置搜索 */
      reset() {
        this.query = {
          page: 1,
          limit: 10,
          schoole_name: this.schoole_name,
          schoole_id: this.schoole_id
        };
        this.reload();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selection = selection;
      },
      /* 显示编辑 */
      openEdit(row) {
        this.current = row;
        if (this.current) {
          this.current.avatar = this.getimageUrl(row.avatar)
        }
        this.showEdit = true;
      },
      /* 删除 */
      remove(row) {
        const loading = this.$loading({
          lock: true
        });
        this.$http.post('/student/delete', {
          id: row.id
        }).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      },
      /* 批量删除 */
      removeBatch() {
        if (!this.selection.length) {
          this.$message.error('请至少选择一条数据')
          return;
        }
        this.$confirm('确定要删除选中的用户吗?', '提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true
          });
          this.$http.post('/student/delete', {
            id: this.selection.map(d => d.id)
          }).then(res => {
            loading.close();
            if (res.data.code === 0) {
              this.$message({
                type: 'success',
                message: res.data.msg
              });
              this.reload();
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        }).catch(() => {});
      },
      openTrajectory(row) {
        this.currentData = row
        this.showtrajectory = true
      },
      /* 导出数据Excel */
      exportExcel() {
        let info = JSON.parse(JSON.stringify(this.query));
        this.$http
          .get("/student/exportExcel", info)
          .then((res) => {
            let data = res.data;
            if (data.code == 0) {
              // 下载文件
              window.location.href = data.data;
              this.$message({
                type: "success",
                message: "导出成功",
              });
            } else {
              this.$message.error("导出失败");
            }
          })
      },
      importExcel() {
        this.showImport = true

      }
    }
  }
</script>

<style scoped>
  .toolbar-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
